
import React from 'react';
import {connect} from 'react-redux';
import {NavLink} from 'react-router-dom';
import MenuConfig from '../../assets/js/menuConfig.js';
import {action_change_memuTitle} from '../../redux/action.js';
import './navLeft.less';
import {Menu} from 'antd';
const {SubMenu}= Menu;
//注  子菜单弹出形式时   defaultOpenKeys={['sub1']}/defaultSelectedKeys={['1']}/selectedKeys={['1']}(没什么作用) 

class NavLeft extends React.Component{
    constructor(props){
        super(props);
        this.state={
            menuTreeNode:[],
            currentKey:''
        }
    };
    componentWillMount(){
        let menuTreeNode=this.renderMenu(MenuConfig);
        this.setState({menuTreeNode})
    };
    //1.数组维度不确定时，就无限调用自己,直到最后一个维度循环完(相当于嵌套循环)  2.map 方法返回一个由原数组中的每个元素调用callback函数后的返回值组成的新数组。
    renderMenu(data){
       return data.map((item)=>{
            if(item.children){
                return (
                    <SubMenu key={item.key} title={item.title}>
                        {this.renderMenu(item.children)}
                    </SubMenu>
                )
            }else{
                return (
                    <Menu.Item key={item.key} title={item.title}>
                        <NavLink to={item.key}>{item.title}</NavLink>            
                    </Menu.Item>
                )
            }
        })
    };
    //点击Menu.Item
    menuHandleClick(e){
        // console.log('e:',e);
        this.setState({
            currentKey:e.key
        });
        this.props._change_menuTitle(e.item.props.title);
    };
    render(){
        let {_change_menuTitle}=this.props;
        return (
            <div className="nav-left">
                <div className="logo">
                    <img src="/img/logo-ant.svg" alt=""/>
                    <h1 >叮当问卷</h1>
                </div>                 
                <Menu onClick={(e)=>{this.menuHandleClick(e)}} mode="vertical" theme="dark" selectedKeys={[this.state.currentKey]}>
                    {/* <Menu.Item key="1" title="首页">首页</Menu.Item>
                    <SubMenu key="ui" title="UI">
                        <Menu.Item key="ui-1" title="button">按钮</Menu.Item>
                        <Menu.Item key="ui-2" title="dialog">弹窗</Menu.Item>
                    </SubMenu> */}
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }
}


let  mapStateToProps=(state,myownProps)=>{
    return {
       
    }
}

let mapDispatchToProps=(dispatch,myownProps)=>{
    return {
        _change_menuTitle:(newTitle)=>{
            dispatch(action_change_memuTitle(newTitle))
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(NavLeft)